<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>魏远商城</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/my-order.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/evaluate.css" />
		<style type="text/css">
			.pic{
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
			}
			.shangchu{
				display: none;
				width: 60px;
				height: 60px;
				background-color: black;
				opacity: 0.5;
				position: absolute;
				z-index: 30;
			}
			.shangchu1{
				display: none;
				width: 15px;
			    height: 15px;
			    background-color: white;
			    position: absolute;
			    z-index: 40;
			    right: 0;
			    top: 0;
			}
			.shangchu1 img{
				vertical-align: super;
			}
		</style>
	</head>

	<body style="background: #eaeef1;">
		<header class="bar bar-nav return-header" style="width: 100%;">
			<span onclick="history.back(-1)" class="order-back mui-action-back"><img src="img/back-le.png" height="50%"/></span>
			<h1 class="title" style="line-height: 2.2rem;">发表评价</h1>
		</header>
		<div class="mui-content">
			<div class="top">
				<div class="text-le">
					<div><textarea class="write" name="evaluate" rows="10" cols="11" placeholder="亲，您的五星好评是我们无限的动力~~"></textarea></div>
				</div>
				<div class="topic-picture">
					<div id="picture" class="picture1">
						<!--<span class="pic" style="background-image: url(img/cabbage.png);"><span class="shangchu"></span><span class="shangchu1"><img src="img/delect.png"/></span></span>
						<span class="pic" style="background-image: url(img/banner7_21.png);"><span class="shangchu"></span><span class="shangchu1"><img src="img/delect.png"/></span></span>
						<span class="pic" style="background-image: url(img/fruit-banner1@2x.png);"><span class="shangchu"></span><span class="shangchu1"><img src="img/delect.png"/></span></span>-->
					</div>
					<div class="add-picyure1"><input type="file" name="" id="inputs" value="" /></div>
				</div>
				<div class="describe describe1">
					<span>描述相符</span><span class="star like"><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/></span>
				</div>
			</div>
			<div class="middle">
				<div class="describe describe2">
					<span>店铺评分</span>
				</div>
				<div class="describe describe1">
					<span>物流服务</span><span class="star wuliu"><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/></span>
				</div>

				<div class="describe describe1">
					<span>服务态度</span><span class="star taidu"><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/><img class="img" src="img/evaluate2-1.png"/></span>
				</div>
			</div>
			<div class="fbottom">
<!--				<span class="pinglun"><img src="img/evaluate3-2.png"/>匿名评论</span>-->
				<span class="issue">发表评论</span>
			</div>
		</div>
		<div class="footer"><div  class="footer1">正在提交评价...请耐心等待</div></div>
		<div style="height: 1px;"></div>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/url.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*提交信息接口*/
			
			$('.issue').on('tap', function() {
				var times1 = $('.like>img').length;
				var times2 = $('.wuliu>img').length;
				var times3 = $('.taidu>img').length;
				var s1 = 0;
				var s2 = 0;
				var s3 = 0;
				for(var i = 0; i < times1; i++) {
					if($('.like>img').eq(i).attr('src') == 'img/evaluate2-1.png') {
						s1++;
					}
				}
				for(var i = 0; i < times2; i++) {
					if($('.wuliu>img').eq(i).attr('src') == 'img/evaluate2-1.png') {
						s2++;
					}
				}
				for(var i = 0; i < times3; i++) {
					if($('.taidu>img').eq(i).attr('src') == 'img/evaluate2-1.png') {
						s3++;
					}
				}
				if($('.pinglun>img').attr('src') == 'img/evaluate3-1.png') {
					var s4 = 3;
				} else if($('.pinglun>img').attr('src') == 'img/evaluate3-2.png') {
					var s4 = 2;
				}
				if($('.write').val()==''){
					mui.alert('您还没有编写评价内容哦');
				}else{
					var n = $('.picture1>span').length;
						//评价图片
						var pho = '';
						if(n!=0&&n<4){
							for(var i = 0;i<n;i++){
								var a = $('.picture1').find('.pic').eq(i).attr('style').indexOf('(')+1;
								var b = $('.picture1').find('.pic').eq(i).attr('style').indexOf(')');
								var pUrl =  $('.picture1').find('.pic').eq(i).attr('style').substring(a,b);
								pho= pho + pUrl +',';
							}
							localStorage.photoEvaluate=pho.substring(0, pho.length - 1);
							console.log(localStorage.photoEvaluate+'》》》》》base64《《《《《');
							comment();
						}else{
							localStorage.photoEvaluate='';
							comment();
						}
				}
				function comment(){
					$('.footer').css('display','block');
					$.ajax({
						url: ur + '/mobilemember/comment/comment',
						type: 'POST',
						headers: {
							"X-Token": localStorage.token
						},
						dataType: 'json',
						data: {
							"commentVO.content": $('.write').val(),
							"commentVO.deliverSpeed": s2,
							"commentVO.descSimilar": s1,
							"commentVO.isDelete": s4,
							"commentVO.serviceAttitude": s3,
							"commentVO.skuId": localStorage.spskuid,
							"fileName": '.jpeg',
							"orderVO.id": localStorage.sureorderid,
							"photo":localStorage.photoEvaluate,
						},
						success: function(data) {
							if(data.result.meta.code==200){
								$('.footer').css('display','none');
							mui.toast('评论成功');
							mui.back();
							}else if(data.result.meta.code==201){
								mui.toast('系统错误');
							}
						},
						error: function(data) {
							console.log(JSON.stringify(data));
						}
					})
				}
			})
			

					$("#inputs").change(function() {
						var fil = this.files;
						for(var i = 0; i < fil.length; i++) {
							reads(fil[i]);
							function reads(fil) {
								var reader = new FileReader();
								reader.readAsDataURL(fil);
								reader.onload = function() {
								document.getElementById("picture").innerHTML +='<span class="pic" style="background-image: url('+reader.result+');"><span class="shangchu"></span><span class="shangchu1"><img src="img/delect.png"/></span></span>';
								}
							}
						}
						if($('#picture>span').length==2){
							$('.add-picyure1').css('display','none');
						}else{
							$('.add-picyure1').css('display','inline-block');
						}
					});
			function getImage1() {
				var c = plus.camera.getCamera();
				c.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var s = entry.toLocalURL() + "?version=" + new Date().getTime();
						console.log(s);
						/!*photo.src = s;*!/
						var img = $('<span class="pic"></span>');
						img.css('background-image', 'url(' + s + ')');
						img.css({
							"background-size": "cover",
							"background-position": "center",
							"background-repeat": "no-repeat",
						});
						$('.picture1').append(img);
						uploadHead(s);
						document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
					}, function(e) {
						console.log("读取拍照文件错误：" + e.message);
					});
				}, function(s) {
					console.log("error" + s);
				}, {
					filename: "_doc/head.jpg"
				})
			}
			
			
			var picarr = [];
			function uploadHead(imgPath) {
				//			生成比例
				var image = new Image();
				image.style.width = "100px";
				image.style.height = "100px";
				image.src = imgPath; //传过来的图片的路径
				image.onload = function() {
					//压缩图片
					var imgData = getBase64Image(image);
					//				imgData.substring()
					picarr.push(imgData.replace("data:image/jpeg;base64,", ""));
					console.log(imgData);
					console.log(picarr.length);
					console.log('307' + picarr[0]);
					console.log('307' + picarr[1]);
					console.log('308' + picarr.join());
				}
			}
			
			//	压缩图片
			function getBase64Image(img) {
				var canvas = document.createElement("canvas"); //找到canvas元素
				var width = img.width;
				var height = img.height;
				canvas.width = width;
				canvas.height = height;
				var ctx = canvas.getContext('2d'); //创建canvas对象 
				ctx.drawImage(img, 0, 0, width, height); //绘图
				var dataURL = canvas.toDataURL("image/jpeg", 0.5);
				//			return dataURL.replace("data:image/jpeg;base64,", "");
				return dataURL;
			}
			
			
			//好的代码
			//删除图片
			var shangchu =true;
			$('.picture1').on('click','.pic',function(){
				if(shangchu){
					$(this).find('.shangchu').css('display','block');
					$(this).find('.shangchu1').css('display','block');
					shangchu=false;
				}else{
					$(this).find('.shangchu').css('display','none');
					$(this).find('.shangchu1').css('display','none');
					shangchu=true;
				}
			});
			$('.picture1').on('click','.shangchu1',function(){
				$(this).parent().remove();
				shangchu=false;
				if($('#picture>span').length==3){
							$('.add-picyure1').css('display','none');
						}else{
							$('.add-picyure1').css('display','inline-block');
						}
			})
			//星
			$('.img').on('tap', function() {
				$(this).attr('src', 'img/evaluate2-1.png');
				$(this).siblings().attr('src', 'img/evaluate2-1.png');
				$(this).nextAll().attr('src', 'img/evaluate2-2.png');
			})
			//匿名评论
			var line = true;
			$('.bottom>span>img').on('tap', function() {
				if(line == true) {
					$('.bottom>span>img').attr('src', 'img/evaluate3-1.png');
					line = false;

				} else {
					$('.bottom>span>img').attr('src', 'img/evaluate3-2.png');
					line = true;
				}
			})
		</script>
	</body>

</html>